﻿@{
    ViewBag.Title = "SaleDetils";
    Layout = null;
}



<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    @*   <link rel="stylesheet" href="https://www.layui.com/layui/css/layui.css">
    <script src="https://www.layui.com/layui/layui.js"></script> *@

</head>
<body>
    <div class="layui-container">
        <div class="layui-row">

            <div class="layui-col-md9">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" placeholder="销售单号" id="SalesOrderCode" name="SalesOrderCode" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="产品编号" id="ProductCode" name="ProductCode" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="产品名称" id="ProductName" name="ProductName" class="layui-input">
                    </div>
                  
                    <button class="layui-btn" id="btnSearch">搜索</button>
                    <button id="openPopup" class="layui-btn">添加</button>
                    <table class="layui-hide" id="demo" lay-filter="test">
                    </table>


                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">退货</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                    </script>

                </div>
            </div>
        </div>
    </div>


    <script src="~/libs/jquery/jquery.js"></script>
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格
            var form = layui.form;
            var tree = layui.tree;



            // 可在此初始化组件和操作dom
            querylist = function () {

 

                var SalesOrderCode = $('#SalesOrderCode').val()
                var ProductCode = $('#ProductCode').val()
                var ProductName = $('#ProductName').val()
                //执行一个 table 实例
                table.render({
                    elem: '#demo'
                    , height: 600
                    ,width:1400
                    , url: '/ProductSaleDetils/SelectProducSaleDetils'  //数据接口
                    , where:
                    {
                        SalesOrderCode: SalesOrderCode,
                        ProductCode: ProductCode,
                        ProductName: ProductName,
                    },
                    request: {
                        pageName: 'pageIndex', //页码的参数名称，默认：page
                        limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    }


                    /* , toolbar: 'default' */ //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , page: {
                        limit: 3,
                        limits: [3, 6, 9, 12],
                        prev: '上一页',
                        next: '下一页',
                        first: '首页',
                        last: '尾页'
                    },


                    method: 'get', //默认：get请求
                    cols: [[ //表头

                        { type: 'checkbox', fixed: 'left'   },//锁定第一列
                        { field: 'SalesOrderCode', title: '销售订单号', width: 100 },
                        { field: 'ProductName', title: '产品名称', width: 100 },
                        { field: 'ProductCode', title: '产品编号', width: 80 },
                        { field: 'ProductSpecification', title: '产品规格', width: 80 },
                        { field: 'Unit', title: '单位', width: 80 },
                        { field: 'UnitPrice', title: '单价', width: 80 },
                        { field: 'Quantity', title: '数量', width: 80 },
                        { field: 'SumPrice', title: '总额', width: 80 },
                        { field: 'OutQuantity', title: '出库数', width: 80 },
                        { field: 'CustomerCode', title: '客户编号', width: 80 },
                        { field: 'CustomerName', title: '客户名称', width: 80 },
                        { field: 'ReturnQuantity', title: '退货', width: 80 },
                        { field: 'ReturnOutQuantity', title: '退货数量', width: 80 },
                        { field: 'CreateTime', title: '创建时间', width: 80  },
                      , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }

                    ]],
                    done: function () {
                        //表格绑定数据后的回调函数
                        layer.msg('权限展示完成！', {
                            icon: 1,
                            time: 1000
                        });
                    }
                });
            }


            querylist();
            $("#btnSearch").on("click", function () {
                querylist();
            })

            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值

                if (layEvent === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({

                            url: "/ProductSaleDetils/DeleteProductSaleDetils?SalesOrderCode=" + data.SalesOrderCode,
                            type: "GET",
                        });

                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') {

                    layer.open({
                        title: '修改',
                        type: 2,
                        anim: 1,
                        offset: 't',
                        area: ['50%', '70%'],
                        content: `/ProductSaleDetils/UpdateProductSelectDetils?SalesOrderCode=${data.SalesOrderCode}?ProductCode=${data.ProductCode}`,

                        end: function () {
                            querylist()
                        }
                    });
                    console.log(data.Id),
                        sessionStorage.setItem("SalesOrderCode", data.SalesOrderCode);
                         sessionStorage.setItem("ProductCode", data.ProductCode);


                }

            });

           


            document.getElementById('openPopup').onclick = function () {
                layui.use(['layer', 'form'], function () {
                    var layer = layui.layer;
                    var form = layui.form;

                    layer.open({
                        type: 1,
                        title: '新增订单',
                        type: 2,
                        anim: 1,
                        offset: 't',
                        area: ['50%', '70%'],

                        content: `/ProductSaleDetils/AddDetils`,

                    });
                });
            };






        });
    </script>
   

</body>
</html>
